<template>
  <div>
    <van-cell-group>
      <van-cell is-link class="ws-nowrap" :title="count+' 人在拼单，可直接参与'" @click="listShow = true">
        <span class="fs-12 text-regular">查看更多</span>
      </van-cell>
      <DetailCellAssembleItem
        v-for="(item,index) in filterList"
        :key="index"
        :item="item"
        @show-detail="onShowDetail"
        @callback="onCallback"
      />
    </van-cell-group>
    <DetailPopupAssembleList v-model="listShow">
      <DetailCellAssembleItem
        slot="item"
        v-for="(item,index) in list"
        :key="index"
        :item="item"
        @show-detail="onShowDetail"
        @callback="onCallback"
      />
    </DetailPopupAssembleList>
    <DetailPopupAssembleItem
      v-if="activeItem"
      :item="activeItem"
      v-model="itemShow"
      @confirm="onConfirm"
      @callback="onCallback"
    />
  </div>
</template>

<script>
import DetailCellAssembleItem from "./CellAssembleItem";
import DetailPopupAssembleList from "./PopupAssembleList";
import DetailPopupAssembleItem from "./PopupAssembleItem";
export default {
  data() {
    return {
      listShow: false,
      itemShow: false,
      activeItem: ""
    };
  },
  props: {
    list: {
      type: Array
    },
    count: {
      type: [Number, String],
      default: 0
    },
    loadData: {
      type: Function
    }
  },
  computed: {
    filterList() {
      return this.list.length > 0 ? this.list.filter((e, i) => i < 2) : [];
    }
  },
  methods: {
    onShowDetail(id) {
      const item = this.list.filter(({ record_id }) => record_id == id);
      this.activeItem = item[0];
      this.itemShow = true;
    },
    onConfirm(id) {
      this.$emit("confirm", id);
      this.itemShow = false;
      this.listShow = false;
    },
    onCallback() {
      this.loadData();
    }
  },
  components: {
    DetailCellAssembleItem,
    DetailPopupAssembleList,
    DetailPopupAssembleItem
  }
};
</script>
<style scoped>
.ws-nowrap {
  white-space: nowrap;
}
</style>
